<div class="modal-content" data-test-modal="create-newsletter">
    <header class="modal-header">
        <h1>Create newsletter</h1>
    </header>
    <button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>

    <div class="modal-body">
        <fieldset>
            <GhFormGroup @errors={{@data.newsletter.errors}} @hasValidated={{@data.newsletter.hasValidated}} @property="name">
                <label for="newsletter-title" class="modal-fullsettings-title">Name</label>
                <input
                    id="newsletter-title"
                    type="text"
                    class="gh-input miw-100 form-text"
                    value={{@data.newsletter.name}}
                    placeholder="Weekly Roundup"
                    data-test-newsletter-title-input
                    {{on "input" (fn this.onInput "name")}}
                />
                <GhErrorMessage @errors={{@data.newsletter.errors}} @property="name" />
            </GhFormGroup>

            <GhFormGroup @errors={{@data.newsletter.errors}} @hasValidated={{@data.newsletter.hasValidated}} @property="description">
                <label for="newsletter-description" class="modal-fullsettings-title">Description</label>
                <textarea
                    id="newsletter-description"
                    class="gh-input miw-100 form-text"
                    {{on "input" (fn this.onInput "description")}}
                >{{@data.newsletter.description}}</textarea>
                <GhErrorMessage @errors={{@data.newsletter.errors}} @property="description" />
            </GhFormGroup>

            <GhFormGroup class="flex justify-between items-start mb2">
                <div class="mr3">
                    <label for="opt-in-existing" class="modal-fullsettings-title">Opt-in existing subscribers</label>
                    <p>
                    {{#if this.optInExisting}}
                        {{#let (members-count-fetcher query=(hash filter="newsletters.status:active")) as |countFetcher|}}
                            This newsletter will be available to <strong>all members</strong>. Your {{#if countFetcher.count}}<strong>{{countFetcher.count}}</strong>{{/if}} existing subscriber{{#if (gt countFetcher.count 1)}}s{{/if}} will also be opted-in to receive it.
                        {{/let}}
                    {{else}}
                        The newsletter will be available to <strong>all new members</strong>. Existing members won’t be subscribed, but may visit their account area to opt-in to future emails.
                    {{/if}}
                    </p>
                </div>
                <div class="for-switch small">
                    <div class="container">
                        <input
                            type="checkbox"
                            id="opt-in-existing"
                            checked={{this.optInExisting}}
                            {{on "check" this.setOptInExisting}}
                        >
                        <button type="button" class="input-toggle-component" {{on "click" this.toggleOptInExisting}}></button>
                    </div>
                </div>
            </GhFormGroup>
        </fieldset>
    </div>

    <div class="modal-footer">
        <button class="gh-btn" type="button" {{on "click" @close}}>
            <span>Cancel</span>
        </button>

        <GhTaskButton
            @buttonText="Create"
            @runningText="Creating"
            @successText="Created"
            @task={{this.saveTask}}
            @idleClass="gh-btn-primary"
            @class="gh-btn gh-btn-icon"
            {{on-key "cmd+s" this.saveViaKeyboard priority=1}}
            {{on-key "Enter" this.saveViaKeyboard priority=1}}
            data-test-button="save-newsletter"
        />
    </div>
</div>
